<template>
  <div class="scenicList-wrapper">
    <section class="app-container">
      <!--工具条-->
      <el-row>
        <el-col :span="9" class="inputform">
          <div>表单名称:</div>
          <el-input
            placeholder="表单名称"
            v-model="queryparam.fromname"
            size="small"
          ></el-input>
        </el-col>
        <el-col :span="15" class="inputform">
          <el-button
            type="primary "
            @click="$refs.gridlist.loadData(1)"
            size="small"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button
            type="primary "
            @click="addfrom"
            size="small"
            icon="el-icon-plus"
            >新增</el-button
          >
        </el-col>
      </el-row>
      <gridlist
        :queryparam="queryparam"
        apicode="tappFrom.queryFromList"
        ref="gridlist"
        :scopedSlots="scopedSlots"
      >
        <template slot="FromName" slot-scope="record">
          <a
            class="margin-a"
            href="javascript:;"
            style="margin-right: 5px;"
            @click="editfrom(record.row)"
            v-if="queryparam.fromtype !== '3'"
            >{{ record.row.FromName }}</a
          >
          <a
            class="margin-a"
            href="javascript:;"
            style="margin-right: 5px;"
            @click="openquestion(record.row)"
            v-else
            >{{ record.row.FromName }}</a
          >
        </template>
        <template slot="operation" slot-scope="record">
          <a
            class="margin-a"
            href="javascript:;"
            style="margin-right: 5px;font-size:12px;"
            @click="editfrom(record.row)"
            ><i class="el-icon-edit"></i>修改</a
          >
          <a
            class="margin-a"
            href="javascript:;"
            style="margin-right: 5px;font-size:12px;"
            @click="deletefun(record.row)"
            ><i class="el-icon-delete"></i>删除</a
          >
          <a
            class="margin-a"
            href="javascript:;"
            style="margin-right: 5px;font-size:12px;"
            @click="liulanfrom(record.row)"
            ><i class="el-icon-view"></i>预览</a
          >
          <a
            class="margin-a"
            href="javascript:;"
            style="margin-right: 5px;font-size:12px;"
            v-if="queryparam.fromtype === '3' || queryparam.fromtype === '1'"
            @click="openquestion(record.row)"
            ><i class="el-icon-coin"></i>表单数据</a
          >
        </template>
      </gridlist>
    </section>
    <formdesign ref="formdesign" @saveafter="saveafter"></formdesign>
  </div>
</template>
<script>
import formdesign from '@/views/fromdesign/index.vue'
import { apiComm } from '@/api/index.js'
export default {
  data() {
    return {
      queryparam: { fromname: '', fromtype: '1' },
      scopedSlots: ['FromName'],
      questionName: ''
    }
  },
  components: { formdesign },
  methods: {
    addfrom() {
      this.$refs.formdesign.addfrom(this.queryparam.fromtype)
    },
    editfrom(row) {
      this.$refs.formdesign.editfrom(row.FID)
    },
    deletefun(row) {
      this.$confirm('确定删除！删除后不可恢复！', '确定删除').then(() => {
        apiComm('tappFrom.delfrom', { fid: row.FID }).then(res => {
          console.log(res)
          this.$refs.gridlist.loadData(1)
        })
      })
    },
    liulanfrom(row) {
      window.open(`/viewfrom?fromid=${row.FID}`)
    },
    openquestion(row) {
      this.$router.push({
        path: '/Flow/questionList',
        query: { fromid: row.FID, questionName: row.from_table_name }
      })
      // this.fromid = row.FID
      // this.questionName = row.from_table_name
      // this.$refs.fromJsonViewdialog.visible = true
    },
    saveafter() {
      this.$refs.gridlist.loadData(1)
    }
  },
  created() {
    // this.queryparam.fromtype = this.$route.query.fromtype
    this.queryparam.fromtype = "1"
  }
}
</script>
<style scoped>
.inputform div:first-child {
  width: 80px;
  display: inline-block;
  height: 40px;
  margin-top: 10px;
  margin-left: 10px;
}
.inputform .el-input {
  width: calc(100% - 100px);
  float: right;
}
.inputform .el-select {
  width: calc(100% - 100px);
  float: right;
}
.inputform button {
  margin-left: 5px;
  margin-right: 5x;
}
</style>
